
<body>
    <!-- 使用方法1演示 -->
    <div>
        <p>
            使用方法1：从元素属性中复制文本，可以使用data-clipboard-text的内容
        </p>
        <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
            点击复制当前按钮的data-clipboard-text属性的内容
        </button>
    </div>
 <!-- 使用方法1演示 -->
    <div style="height:10px; border-top:solid 1px black;margin-top:20px;"></div>
 <!-- 使用方法2演示 -->
    <div>
        <p>
            使用方法2：用一个元素当触发器,来复制另一个元素的文本,data-clipboard-target属性后需要跟属性选择器
        </p>
        <input id="foo" value="这个元素id为“foo”" >
        <button class="btn" data-clipboard-target="#foo">
            点击复制id为“foo”元素的文本
        </button>
    </div>
<!-- 使用方法2演示 --> 

</body>

<!-- 使用前必须引用js -->
<script src="jquery.min.js"></script>
<script src="clipboard.min.js"></script>
<!-- 使用前必须引用js -->
<!-- 使用前必须初始化 -->
<script>
    var clipboard = new Clipboard('.btn');//选择触发元素
</script>
<!-- 使用前必须初始化 -->


<!-- 可选使用-监控复制成功或失败 -->
<script>
    clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    alert("复制成功！");
    e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        alert("复制失败！");
    });

</script>
<!-- 可选使用-监控复制成功或失败 -->

<div style="height:10px; border-top:solid 1px black;margin-top:20px;">参考文档：https://www.jianshu.com/p/3f8867de041e</div>

 
